<template>
  <u-popup :show="authShow" :round="10" closeOnClickOverlay @close="closeAuth" bgColor="#191919">
    <view class="auth-content">
      <!-- 顶部图标 -->
      <!-- <u-icon name="weixin-fill" color="#09BE4F" size="60" class="auth-icon"></u-icon> -->
      <!-- <image src="/static/img/logo.png" style="height: 130rpx;border-radius: 16rpx;margin-bottom: 20rpx;" mode="heightFix" class="logo"></image> -->
      <!-- 提示文字 -->
      <text class="title">手机号快捷登录</text>
      <text class="tip">为了更好的服务体验，请授权手机号</text>
      <!-- 隐私协议 -->
      <view class="protocol">
        <u-checkbox-group v-model="checkboxValue" placement="column">
          <u-checkbox :name="1"></u-checkbox>
        </u-checkbox-group>
        授权即代表同意
        <text class="link" @click="goProtocol(1)">《用户服务协议》</text>
        及
        <text class="link" @click="goProtocol(2)">《隐私政策》</text>
      </view>
      <!-- 授权按钮 -->
      <button class="auth-btn" @click="getPhone" v-if="!checkboxValue[0]">
        手机号快捷登录
      </button>
      <button class="auth-btn" open-type="getPhoneNumber" @getphonenumber="phoneSubmit" v-else>
        手机号快捷登录
      </button>
      <text class="noLogin" @click="closeAuth">暂不登陆</text>
    </view>
  </u-popup>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import { bindPhoneApi } from "@/sheep/api/baseApi";
export default {
  data() {
    return {
      checkboxValue: [0],
    };
  },
  computed: {
    ...mapGetters(["authShow", "userId"]),
  },
  methods: {
    ...mapMutations({
      setAuth: "user/setAuth",
    }),
    async phoneSubmit(e) {
      if (e.detail.errMsg == "getPhoneNumber:ok") {
        const res = bindPhoneApi(e.detail.code);
        if (res) {
          this.closeAuth();
        }
      } else {
        uni.showToast({
          title: "您已取消授权",
          icon: "none",
          duration: 2000,
        });
      }
    },
    closeAuth() {
      this.setAuth(false);
    },
    goProtocol(value) {
      uni.navigateTo({ url: "/pages/protocol/index?type=" + value });
    },
    getPhone() {
      if (!this.checkboxValue[0]) {
        uni.showToast({
          title: "请先同意隐私协议",
          icon: "none",
          duration: 2000,
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.auth-content {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-icon {
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  color: #fff;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.tip {
  font-size: 28rpx;
  color: #fff;
  margin-bottom: 60rpx;
}
.noLogin {
  font-size: 28rpx;
  color: #fff;
  margin-top: 20rpx;
}
.auth-btn {
  width: 100%;
  height: 80rpx;
  background: #ffd308;
  border-radius: 40rpx;
  color: #333;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  &::after {
    border: none;
  }

  ::v-deep .u-icon {
    margin-right: 15rpx;
  }
}
.protocol {
  margin-bottom: 40rpx;
  font-size: 24rpx;
  color: #fff;
  display: flex;
  .link {
    color: #ffd308;
  }
}
</style>
